<template>
  <div>
    <van-nav-bar fixed title="商户列表" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <div class="head-bg-box bg-primary" />
      <!-- 背景 -->
      <div class="page-content-box mlr-25">
        <stateFilter :filter-list="filterList" theme="0" @getData="getData" />
        <!-- 标签栏 -->
        <content-search
          style="margin-top:0"
          class="mb-40"
          theme="0"
          placeholder="请输入商户名称/商户号"
          :search-val="searchVal"
          @clear="clear"
          @getVal="getVal"
          @search="search"
        />
        <!-- 搜索栏 -->
        <div v-for="(item, index) in storeList" :key="index" class="br-18 mb-25 bg-white pd-40" @click="goPage(item.StoreId)">
          <div class="flex-s-c">
            <div class="flex-v-c">
              <headPortrait-box class="br-6 is-90" :head-portrait-url="item.Logo" />
              <span class="ml-20 fs-32">{{ item.StoreName }}</span>
            </div>
            <level-box :grade-info="item.gradeInfo" />
          </div>
          <div class="flex-s-c mt-30">
            <div class="flex-s-c flex-d-c">
              <span class="color-gray-light">会员数</span>
              <span class="color-primary">
                <span class="fs-40">{{ item.MemberCount }}</span>个
              </span>
            </div>
            <div class="flex-s-c flex-d-c">
              <span class="color-gray-light">订单数</span>
              <span class="color-primary">
                <span class="fs-40">{{ item.OrderCount }}</span>单
              </span>
            </div>
            <div class="flex-s-c flex-d-c">
              <span class="color-gray-light">业绩</span>
              <span class="color-primary">
                <span class="fs-40">{{ item.TotalSale }}</span>元
              </span>
            </div>
          </div>
        </div>
        <div v-if="storeList.length === 0" class="bg-white br-18">
          <no-data />
        </div>
        <p v-if="end === true && storeList.length !== 0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        <!-- 列表 -->
      </div>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import levelBox from 'components/levelBox'
import noData from 'components/noData'
import stateFilter from 'components/stateFilter'
import contentSearch from 'components/contentSearch'
import { GetInvitStorePage, GetInvitStoreTotal } from 'api/store'
import utils from 'utils/utils'
export default {
  components: {
    contentSearch,
    stateFilter,
    headPortraitBox,
    levelBox,
    noData
  },
  data() {
    return {
      // 标签栏
      filterList: [],
      gradeIdList: [],

      searchVal: undefined,
      requestData: {
        PageIndex: 1,
        PageSize: 4,
        StartTime: null,
        EndTime: null
      },
      // 商户列表
      storeList: [],
      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
    this.GetInvitStoreTotal()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      console.log('val:' + val)
      this.scollRequest = true
      this.end = false
      this.requestData.SearchKey = val
      this.requestData.PageIndex = 1
      this.storeList = []
      this.GetInvitStorePage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    getData(val) {
      this.clear()
      console.log(val)
      this.scollRequest = true
      this.end = false
      this.requestData.PageIndex = 1
      this.requestData.SearchKey = undefined
      this.requestData.GradesId = this.gradeIdList[val.index]
      this.storeList = []
      console.log(this.requestData)
      this.GetInvitStorePage()
    },
    goPage(id) {
      console.log(id)
      this.$router.push('/storeManage/info/' + id)
    },
    GetInvitStorePage() {
      // console.log(this.requestData)
      GetInvitStorePage(this.requestData).then(res => {
        if (res) {
          if (res.Data && res.Data.length > 0) {
            res.Data.forEach(tem => {
              const gradeInfo = {}
              gradeInfo.GradeName = tem.GradeName
              gradeInfo.GradeLevel = tem.GradeLevel
              tem.gradeInfo = gradeInfo
              this.storeList.push(tem)
            })
          }
          console.log('商户列表')
          console.log(this.storeList)
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
          this.end = false
        }
      })
    },
    GetInvitStoreTotal() {
      const _this = this
      console.log(1234)
      GetInvitStoreTotal().then(res => {
        if (res) {
          console.log(res)
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              const item = tem.Key + '(' + tem.Attach + ')'
              _this.filterList.push(item)
              _this.gradeIdList.push(tem.Value)
            })
          }
          console.log(_this.filterList)
          console.log('商户统计')
          console.log(_this.gradeIdList)
          this.GetInvitStorePage()
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      console.log(1231)
      const _this = this
      if (_this.scollRequest === true) {
        if (utils.getScrollHeight() - utils.getClientHeight() - utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetInvitStorePage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 342px;
}
.grade-box {
  // width: 100px;
  height: 46px;
  line-height: 46px;
  border-radius: 23px;
  img {
    width: 48px;
    height: 48px;
  }
}
</style>
